<template>
	<view>
		<view class="mf-hotpack-title">兔兔叮平台优惠券活动专题</view>
		<view class="hotpack">
			<view class="mf-hot-one mf-hot-wrap" v-if="hotOneList.length">
				<view v-for="(item,index) in hotOneList" :key="index" :class="'mf-hot-one-item mf-hot-one-item-'+ (index+1)">
					<view class="mf-hot-one-price">
						<view class="mf-hot-one-name">{{item.name}}</view>
						<text class="mf-hot-one-symbol">￥</text>
						<text class="mf-hot-one-amount">{{ item.discount }}</text>
						<text class="mf-hot-one-card">优惠券</text>
					</view>
					<view class="mf-hot-one-date">{{ timestampToTime(item.end_time) }}</view>
					<view class="mf-hot-one-btn" @click="had_pull(item.id)">{{ item.is_had ? '已领取' : '立即领取' }}</view>
				</view>
			</view>
			
			<view class="mf-hot-two mf-hot-wrap" v-if="hotTwoTopList.length || hotTwoBottomList.length">
				<view class="mf-hot-two-top" v-for="(item,index) in hotTwoTopList" :key="index">
					<view class="mf-hot-two-top-left">
						<view class="mf-hot-two-top-price">
							<view class="mf-hot-two-top-name">{{ item.name }}</view>
							<view class="mf-hot-two-top-sub">
								<text>{{ item.discount }}</text>
								<text>元优惠券</text>
								<text class="mf-hot-two-sub-date">{{ timestampToTime(item.end_time) }}</text>
							</view>
						</view>
						<!-- <view class="mf-hot-two-top-date">{{ timestampToTime(item.start_time) }}-</view> -->
						<view class="mf-hot-two-top-progress">
							<view class="mf-hot-two-top-progress-bar">
								<view class="mf-hot-two-top-progress-bar-active" :style="'width:' + Math.floor(item.had_pull / item.num * 100) +'%;'"></view>
							</view>
							<view class="mf-hot-two-top-progress-percent">
								<text>已抢</text>
								<text>{{ Math.floor(item.had_pull / item.num * 100) }}%</text>
							</view>
						</view>
					</view>
					<view class="mf-hot-two-top-right">
						<view class="mf-hot-two-btn" @click="had_pull(item.id)">{{ item.is_had ? '已领取' : '立即领取' }}</view>
					</view>
				</view>
				<view class="mf-hot-two-bottom">
					<view class="mf-hot-two-item" v-for="(item,index) in hotTwoBottomList" :key="index">
						<view class="mf-hot-two-bottom-name">{{ item.name }}</view>
						<view class="mf-hot-two-item-top">
							<view class="mf-hot-two-item-price">
								<text class="mf-hot-two-item-symbol">￥</text>
								<text class="mf-hot-two-item-number">{{ item.discount }}</text>
							</view>
							<view class="mf-hot-two-item-price-limit">
								<view>
									<text>满</text>
									<text>{{ item.order_money }}</text>
									<text>使用</text>
								</view>
								<view>{{ timestampToTime(item.end_time) }}</view>
							</view>

						</view>
					</view>
					<view class="mf-hot-two-2-btn" @click="had_pull(item.id)">{{ item.is_had ? '已领取' : '立即领取' }}</view>
				</view>
			</view>
		
			<view class="mf-hot-three mf-hot-wrap" v-if="hotThreeList.length">
				<view class="mf-hot-three-item" v-for="(item,index) in hotThreeList" :key="index">
					<view class="mf-hot-three-name">{{ item.name }}</view>
					<view class="mf-hot-three-price">
						<text>￥</text>
						<text class="mf-hot-three-number">{{ item.discount }}</text>
					</view>
					<view class="mf-hot-three-date">{{ timestampToTime(item.end_time) }}</view>
					<view class="mf-hot-three-limit">
						<text>满</text>
						<text>{{ item.order_money }}</text>
						<text>使用</text>
					</view>
					<view class="mf-hot-three-btn" @click="had_pull(item.id)">{{ item.is_had ? '已领取' : '立即领取' }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				backKey:'mf_hotpack',
				uid:'',
				hotOneList:[],
				hotTwoTopList:[],
				hotTwoBottomList:[],
				hotThreeList:[]
			}
		},
		methods: {
			timestampToTime(timestamp) {
			    const date = new Date(timestamp * 1000);
			    const Y = date.getFullYear() + '-';
			    const M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			    const D = date.getDate() + ' ';
			    return Y+M+D;
			},
			getHotLists(){
				this.getHotOne()
				this.getHotTwoTop()
				this.getHotTwoBottom()
				this.getHotThree()
			},
			had_pull(id){
				const uid = this.uid
				if(!uid){
					this.checkLogin()
					return
				}
				uni.request({
					url:'https://www.jlmkkj.com/appapi.php?c=Special&a=had_pull',
					data:{
						uid:uid,
						coupon_id:id
					},
					success:res=>{
						uni.showToast({
						    title: '领取成功',
						    duration: 2000
						});
						this.getHotLists()	
					}
				})
			},
			initCheckLogin(){
				const isLogin = app.globalData.is_login
				if(isLogin){
					const uid = app.globalData.userInfo.uid
					this.uid = uid
				}
			},
			checkLogin(){
				const isLogin = app.globalData.is_login
				if(!isLogin){
					location.href = 'https://www.jlmkkj.com/packapp/my/login.html?back=' + this.backKey
				}else {
					// 设置用户信息
					const uid = app.globalData.userInfo.uid
					// console.log(uid)
					this.uid = uid
				}	
			},
			getHotOne(){
				let _uid = this.uid
				uni.request({
					url:'https://www.jlmkkj.com/appapi.php?c=Special&a=getHotpackOne',
					data:{
						uid:_uid
					},
					success:res=>{
						const lists = res.data.result.couponArr
						// console.log(lists)
						this.hotOneList = lists
					}
				})
			},
			getHotTwoTop(){
				let _uid = this.uid
				uni.request({
					url:'https://www.jlmkkj.com/appapi.php?c=Special&a=getHotpackTwoTop',
					data:{
						uid:_uid
					},
					success:res=>{
						const lists = res.data.result.couponArr
						// console.log(lists)
						this.hotTwoTopList = lists
					}
				})
			},
			getHotTwoBottom(){
				let _uid = this.uid
				uni.request({
					url:'https://www.jlmkkj.com/appapi.php?c=Special&a=getHotpackTwoBottom',
					data:{
						uid:_uid
					},
					success:res=>{
						const lists = res.data.result.couponArr
						// console.log(lists)
						this.hotTwoBottomList = lists
					}
				})
			},
			getHotThree(){
				let _uid = this.uid
				uni.request({
					url:'https://www.jlmkkj.com/appapi.php?c=Special&a=getHotpackThree',
					data:{
						uid:_uid
					},
					success:res=>{
						const lists = res.data.result.couponArr
						// console.log(lists)
						this.hotThreeList = lists
					}
				})
			}
		},
		mounted(){
			this.initCheckLogin()
			this.getHotLists()
		}
	}
</script>

<style>
	@import url("./hotpack.scss");
</style>
